<template>
  <div class="page">
    <wl-panel setW="900" title="审核状态" subTitle="" titleIcon="btn_sh">
      <template v-if="footerFlag" slot="panel_footer">
          <el-button @click="editAudit" type="primary">审核</el-button>
      </template>
      <template slot="panel_body">
        <div class="pic_list">
            <div class="div-title">
                <div class="div-web">
                    <div>当前状态：<span :class="[{succeed : formData.status =='pass', nostart:formData.status =='refuse',underway:formData.status=='checking'}]">{{setVal(formData.status)}}</span></div>
                    <div>网站名称：{{webData.name}}</div>
                </div>
                <div class="label-apply"   @click="rowShow">申请信息</div>
            </div>
            <ul>
                <li v-for="(item, index) in formData.nodes" :key="index" :offset="index > 0 ? 1 : 0">
                    <el-row>
                        <el-col :div="16">
                            <div>
                                <el-card  v-if="index < formData.nodes.length">
                                    <div  class="card-item">
                                        <div class="div-svg">
                                            <svg-icon  :class="[{succeedSvg : item.status =='pass', nostartSvg:item.status =='refuse', underwaySvg:item.status =='checking',normalSvg :index ==0,waitSvg:item.status =='wait'}]" :icon-class="setIcon(item.status)" :class-name="setIcon(item.status)" />
                                        </div>
                                        <div class="div-item">
                                            <div class="div-item-label">
                                                <div class="div-item-name">{{setName(item.value_name)}}</div>
                                                <div style="height:24px">{{setTime(item,index)}}</div>
                                                <div :class="[{succeed : item.status =='pass', nostart:item.status =='refuse',underway:item.status =='checking',normal :index ==0,wait:item.status =='wait'}]" >{{setStatus(item.status,index)}}</div>
                                            </div>
                                            <div v-if="index != formData.nodes.length-1" :class="[{succeedLine : item.status =='pass',underwayLine:item.status =='checking',normalLine :index ==0,waitLine:item.status =='wait'},'line-item' ]"></div>
                                        </div>
                                    </div>
                                </el-card>
                             </div>
                        </el-col>
                    </el-row>
                </li>
              </ul>
        </div>
      </template>
    </wl-panel>
  </div>  
</template>
<script lang="ts" src="./auditM_status.ts"></script>
<style scoped>
.wl-panel-body ul {
  border: 1px solid #dddddd;
  margin-top: 10px;
}

.label-apply {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}

.div-title {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px 0 10px;
  font-size: 16px;
}

.div-web {
  display: flex;
  width: 350px;
  justify-content: space-between;
}

.line-item {
  margin-left: -65px;
  margin-top: -45px;
  height: 1px;
  width: 100px;
}

.div-svg {
  margin-top: -30px;
}

.card-item {
  display: flex;
  align-items: center;
}

.div-item {
  display: flex;
  align-items: center;
  height: 100px;
}

.div-item-name {
  font-size: 18px;
}

.div-item-label {
  width: 150px;
  height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.pic_list .el-card {
  border: 0px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.image {
  width: 100%;
  display: block;
}

.image-add {
  margin-top: 10px;
  width: 100%;
  display: block;
}

.arrow {
  margin-top: 90px;
}

.pic_list {
  display: block;
  white-space: nowrap;
  overflow: auto;
  text-align: left;
  padding: 0 30px;
}
.pic_list li {
  width: 200px;
  height: 140px;
  display: inline-block;
}

.succeed {
  color: #52c41a;
}

.underway {
  color: #fa541c;
}

.nostart {
  color: #f75e65;
}

.normal {
  color: #3399ff;
}

.wait {
  color: #333333;
}

.succeedLine {
  background-color: #52c41a;
}

.underwayLine {
  background-color: #fa541c;
}

.nostartLine {
  background-color: #f75e65;
}

.normalLine {
  background-color: #3399ff;
}

.waitLine {
  background-color: #333333;
}

.normalSvg {
  fill: #3399ff;
  width: 40px;
  height: 40px;
}

.succeedSvg {
  fill: #52c41a;
  width: 40px;
  height: 40px;
}

.underwaySvg {
  fill: #fa541c;
  width: 40px;
  height: 40px;
}

.nostartSvg {
  fill: #f75e65;
  width: 40px;
  height: 40px;
}

.waitSvg {
  fill: #333333;
  width: 40px;
  height: 40px;
}
</style>
